/* VE base styles */
@use "src/styles/globals";

/* ------------------------------------------------------------------
  1 Diff styling
------------------------------------------------------------------- */

/* Delete styling */
del {
  background-color: #ffe3e3 !important;
}

/* Insert styling */
ins {
  background-color: #dafde0 !important;
  text-decoration: none !important;
}

/* No change styling */
.match,
.textdiff span {
  color: gray;
}

/* ------------------------------------------------------------------
  1.1 History component styling
------------------------------------------------------------------- */

spec-history {
  .history-top {
    position: absolute;
    height: 300px;
    overflow: scroll;
    width: 95%;
    border-bottom: 1px solid;
  }

  .history-bottom {
    position: absolute;
    top: 430px;
  }

  /* SVG arrow for pointing from history to present in spec */
  .change-connection {
    height: 18px;
    margin: 2px 0 3px;
  }

  /* ------------------------------------------------------------------
    1.2 Commit selection
  ------------------------------------------------------------------- */

  /* Arrow connecting former commit to current */
  .diff-dotted-connection {
    position: absolute;
    height: calc(100% - 40px);
    border: 2px solid #cacaca;
    left: -12px;
    width: 8px;
    top: 20px;
    border-right: none;

    @include globals.border-radius(8px 0 0 8px);
  }

  /* Flex styling to keep buttons and labels vertically aligned */
  .inline-diff-buttons {
    display: flex;
    align-items: center;
  }

  .inline-diff-buttons span:first-child {
    padding-left: 0;
    width: 5.4em;
  }

  /* Custom styling to keep labels inline with dropdowns */
  span.inline-btn-label {
    min-height: 28px;
    margin: 6px 0;
    padding: 7px 4px;
    line-height: 13px;
    color: globals.$ve-light-text;
  }

  /* SVG arrow for pointing from history to present */
  .diff-dotted-connection::after {
    background-image: url("../../../assets/images/arrowhead.svg");
    position: absolute;
    right: -8px;
    top: calc(50% - 10px);
    content: " ";
    background-size: 18px 24px;
    height: 20px;
    width: 24px;
    background-repeat: no-repeat;
  }

  /* ------------------------------------------------------------------
    1.3 Footer at bottom of right pane for reverting documentation
  ------------------------------------------------------------------- */

  /* Stick revert section to bottom of right pane */
  .revert-section {
    float: right;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #eee;
    margin: 30px 0 0;
  }

  .revert-section > div {
    float: right;
    display: flex;
    padding: 16px 0;
    text-align: right;
    align-items: center;
  }

  .revert-section .btn {
    margin: 0 8px;
  }
}

.revert-dialogue.modal-body {
  p {
    font-size: 16px;
    margin-bottom: 10px;
  }

  h3 {
    font-size: 20px;
    font-weight: 600;
  }

  /* ------------------------------------------------------------------
  2. History modal
  ------------------------------------------------------------------- */

  /* Special styling to preview element */
  .element-preview-box {
    padding: 10px 20px;
    background-color: globals.$ve-silver-lighter-1;

    @include globals.border-radius(3px);

    border: 1px solid globals.$ve-silver-darker-1;
  }
}
